<template>
  <div class="myInfo">
    <hmNanBar title="我的资料" path="/home/my"></hmNanBar>
    <div class="content">
      <myCell
        title="头像"
        :value="userInfo.avatar"
        @click.native="goEdit('avatar')"
        type="imge"
        class="imge"
        center
      ></myCell>
      <myCell
        title="昵称"
        :value="userInfo.nickname"
        class="nikname"
        @click.native="goEdit('nickname')"
      ></myCell>
      <myCell
        title="性别"
        :value="genderObj[userInfo.gender]"
        @click.native="showPopup = true"
      ></myCell>
      <myCell
        title="地区"
        :value="area.city_list[userInfo.area]"
        @click.native="showCity = true"
      ></myCell>
      <myCell
        title="个人简介"
        :value="userInfo.intro"
        @click.native="goEdit('intro')"
      ></myCell>
      <van-button block class="exit" @click="exit"
        ><span class="red">退出登录</span></van-button
      >
    </div>
    <!-- 性别显示组件  van-popup弹出层 用来展示弹窗 bottom在底部展示 展示位置top、bottom、left、right v-model布尔值是否显示弹框-->
    <van-popup v-model="showPopup" position="bottom">
      <!-- 选择器 与弹出层配合使用 show-toolbar工具栏布尔值 default-index默认选择下标 columns数组 显示数据-->
      <van-picker
        v-if="bol"
        title="性别选择"
        show-toolbar
        :default-index="userInfo.gender"
        :columns="Object.values(genderObj)"
        @cancel="showPopup = false"
        @confirm="popupconfirm"
      />
    </van-popup>
    <!-- 城市组件 利用级联选择器 -->
    <van-popup v-model="showCity" position="bottom">
      <van-area
        v-if="bol"
        title="城市选择"
        :columns-num="2"
        :area-list="area"
        :value="userInfo.area"
        @cancel="showCity = false"
        @confirm="cityConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import myCell from './myCell'
import { mapState } from 'vuex'
// 导入城市组件
import area from '@/assets/js/area.js'
// 导入token组件
import { removeLocal } from '@/utils/local.js'
// 导入修改用户信息
import { auEdit } from '@/api/my.js'
export default {
  mounted () {
    document.querySelector('body').style.background = '#f7f4f5'
  },
  beforeDestroy () {
    document.querySelector('body').style.backgroundColor = '#fff'
  },
  data () {
    return {
      // 把组件中的数据赋值给data
      area: area,
      genderObj: {
        0: '尾汁',
        1: '男',
        2: '女'
      },
      showPopup: false,
      showCity: false,
      bol: true
    }
  },
  components: {
    myCell
  },
  computed: {
    ...mapState(['userInfo'])
  },
  watch: {
    showPopup (value) {
      if (!value) {
        this.bol = false
        this.$nextTick(() => {
          this.bol = true
        })
      }
    },
    showCity (value) {
      if (!value) {
        this.bol = false
        this.$nextTick(() => {
          this.bol = true
        })
      }
    }
  },
  methods: {
    // 当点击退出的时候1.提示2.清除token 修改登录状态 返回login页
    exit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确定退出登录吗？'
        })
        .then(() => {
          removeLocal('token')
          this.$store.commit('setIsLogin', false)
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    // 修改性别选择确定按钮时
    popupconfirm (value, index) {
      window.console.log(value, index)
      this.showPopup = false
      this.eidtInfo('gender', index)
    },
    // 修改城市地区确定按钮时 value[1].code 需要市级所以就选择第2个数组中的code
    cityConfirm (value, index) {
      this.showCity = false
      this.eidtInfo('area', value[1].code)
    },
    // 修改用户资料接口
    eidtInfo (key, value) {
      auEdit({
        [key]: value
      }).then(() => {
        this.$toast.success('修改成功')
        this.$store.dispatch('getUserIndo')
      })
    },
    goEdit (str) {
      this.$router.push('/home/eidtInfo?type=' + str)
    }
  }
}
</script>

<style lang="less" scoped>
.myInfo {
  .content {
    padding: 14px @p15;
    background-color: #f7f4f5;
    .nikname {
      margin-top: 10px;
    }
    .exit {
      margin-top: 15px;
      .red {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #e40137;
        line-height: 22px;
        letter-spacing: 0px;
      }
    }
  }
}
</style>
